import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import { auth } from "@/utils/auth";
import { message } from 'antd';

function FormDialog() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
  user_id: '6',
  device_mac: '8',
  // name: '8',
  device_imei1: '8',
  device_imei2: '8',
  mem: '8',
  sdcard: '8',
  useman: '8',
  price: '8'
  });

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      const isTokenValid = await auth.handleTokenExpiration();
      if (!isTokenValid) return;

      const response = await fetch("/agentapi/api/t-device", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${await auth.getValidAccessToken()}`,
        },
        body: JSON.stringify(formData),
      });

      if (response.status === 201) {
        message.success("设备添加成功");
        handleClose();
        // setFormData({
        //   name: '',
        //   imei1: '',
        //   imei2: '',
        //   memory: '',
        //   storage: '',
        //   user: '',
        //   price: ''
        // });
      } else {
        message.error("设备添加失败");
      }
    } catch (error) {
      message.error("设备添加失败，请检查网络连接");
    } finally {
      setLoading(false);
    }
  };

  return (
     <div>
      <Button variant="contained" color="primary" onClick={handleOpen}>
        确认添加设备
      </Button>

      <Dialog open={open} onClose={handleClose}>
        <form onSubmit={handleSubmit}>
          <DialogTitle>添加新设备</DialogTitle>
          <DialogContent>
            {/* <TextField
              autoFocus
              margin="dense"
              name="name"
              label="设备名称"
              type="text"
              fullWidth
              variant="standard"
              value={formData.name}
              onChange={handleChange}
              required
            /> */}
            <TextField
              margin="dense"
              name="device_imei1"
              label="IMEI1"
              type="text"
              fullWidth
              variant="standard"
              value={formData.device_imei1}
              onChange={handleChange}
              required
            />
            <TextField
              margin="dense"
              name="device_imei2"
              label="IMEI2"
              type="text"
              fullWidth
              variant="standard"
              value={formData.device_imei2}
              onChange={handleChange}
            />
            <TextField
              margin="dense"
              name="mem"
              label="内存"
              type="text"
              fullWidth
              variant="standard"
              value={formData.mem}
              onChange={handleChange}
            />
            <TextField
              margin="dense"
              name="sdcard"
              label="存储"
              type="text"
              fullWidth
              variant="standard"
              value={formData.sdcard}
              onChange={handleChange}
            />
            <TextField
              margin="dense"
              name="useman"
              label="使用人"
              type="text"
              fullWidth
              variant="standard"
              value={formData.useman}
              onChange={handleChange}
            />
            <TextField
              margin="dense"
              name="price"
              label="价格"
              type="text"
              fullWidth
              variant="standard"
              value={formData.price}
              onChange={handleChange}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose} disabled={loading}>取消</Button>
            <Button type="submit" variant="contained" color="primary" disabled={loading}>
              {loading ? '保存中...' : '保存'}
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    </div>
  );
}

export default FormDialog;